<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/test.css">
</head>
<style type="text/css">
    /*元素选择器*/
    span{
        color: black;
        border: 3px solid red;
    }
    /*ID选择器*/
    #div2{
        border: 3px solid green;
    }
    /*类选择器*/
    .divclass{
        border: 3px solid gainsboro;
        background: green;
    }
    /*属性选择器*/
    span[dir="auto"]{
        border: 3px solid yellow;
    }
    /*伪类*/
    a:link{color: green}    /*未访问*/
    a:visited{color: red}   /*已访问*/
    a:hover{color: blue}    /*鼠标悬停*/
    a:active{color: yellow} /*选中点击的时候*/

    /*层次选择器*/
    div div #font1{
        color: blue;
        text-align: center;
        letter-spacing: 100px;
    }
</style>
<body>
    <!--内联样式-->
    <div id="div1" style="border: 3px solid greenyellow">这里是内联样式格式</div><br>
    <div id="div2">这里是内联样式格式</div><br>
    <div id="div3" class="divclass">这里是内联样式格式</div><br>
    <div id="div4" class="divclass">这里是内联样式格式</div><br>
    <br>
    <!--内部样式表-->
    <span>内部样式格式1</span><br><br>
    <span dir="auto">内部样式格式2</span><br><br>
    <span>内部样式格式3</span><br><br>
    <span>内部样式格式4</span><br><br>

    <!--伪类-->
    <a href="http://www.baidu.com/" target="_blank">百度</a>
    <a href="http://www.jd.com/" target="_blank">京东</a>
    <a href="http://www.hao123.com/" target="_blank">好123</a>

    <!--层次选择器-->
    <div>
        <div>
            <h2 id="font1">您好呀</h2>
        </div>
        <div>
            <h2>您好呀</h2>
        </div>
    </div>
</body>
</html>